<template>
  <div class="main">
    <div class="main-list" v-for="v in products" :key="v.product_id">
      <div class="main-img">
        <router-link :to="`/detail/${v.product_id}`">
          <!-- <img v-lazy="v.product_img_url" arg="@/assets/image/loading.gif" :data-src="v.product_img_url" /> -->
          <img v-lazy="v.product_img_url" />
          <!-- <img src="@/assets/image/loading.gif" :data-src="v.product_img_url" alt="" loading="lazy" /> -->
        </router-link>
      </div>
      <div class="main-item">
        <div class="main-module-1">
          <span>{{ v.product_name }}</span>
        </div>
        <div class="main-module-2">
          <b>￥：{{ v.product_uprice }}</b>
        </div>
        <div class="main-module-3" @click="addCartClick(v)">
          <span class="shoppingCart">加入购物车</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { basketStore } from "@/store/basekt";

const $props = defineProps({
  products: {
    type: Array,
    required: true,
  },
});

const useBasketStore = basketStore();
const addCartClick = (v) => {
  useBasketStore.addItem(v);
};
</script>

<style scoped></style>
